<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="The blog's main page">
    <meta name="_xsrf" content="{{.xsrf_token}}"/>
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js" async></script>
    <title>{{.name}}</title>

    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-"
          crossorigin="anonymous" async>
    <link rel="shortcut icon"
          href=""
          type="image/x-icon"/>


    <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" async>
    <!--<![endif]-->


    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/static/css/layouts/blog-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/static/css/layouts/blog.css" async>
    <!--<![endif]-->
</head>
<body style="overflow-x:hidden;">

<style>
    .custom-menu-wrapper {
        background-color: rgb(113, 122, 177);
        margin-bottom: 2.5em;
        white-space: nowrap;
        position: relative;
    }

    .custom-menu {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
    }

    .custom-menu .pure-menu-link,
    .custom-menu .pure-menu-heading {
        color: white;
    }

    .custom-menu .pure-menu-link:hover,
    .custom-menu .pure-menu-heading:hover {
        background-color: transparent;
    }

    .custom-menu-top {
        position: relative;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .custom-menu-brand {
        display: block;
        text-align: center;
        position: relative;
    }

    .custom-menu-toggle {
        width: 44px;
        height: 44px;
        display: block;
        position: absolute;
        top: 3px;
        right: 0;
        display: none;
    }

    .custom-menu-toggle .bar {
        background-color: white;
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 100px;
        position: absolute;
        top: 22px;
        right: 12px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
    }

    .custom-menu-toggle .bar:first-child {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    .custom-menu-toggle.x .bar {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .custom-menu-toggle.x .bar:first-child {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .custom-menu-screen {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
        height: 3em;
        width: 70em;
        position: absolute;
        top: 0;
        z-index: -1;
    }

    .custom-menu-tucked .custom-menu-screen {
        -webkit-transform: translateY(-44px);
        -moz-transform: translateY(-44px);
        -ms-transform: translateY(-44px);
        transform: translateY(-44px);
    }

    @media (max-width: 800em) {

        .custom-menu-screen {
            background-color: rgba(113, 122, 177, 0.5);
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            transition: all 0.5s;
            height: 3em;
            width: 70em;
            position: absolute;
            top: 0;
            z-index: -1;
        }

        .custom-menu {
            display: block;
        }

        .custom-menu-toggle {
            display: block;
            display: none \9;
        }

        .custom-menu-bottom {
            position: absolute;
            width: 100%;
            border-top: 1px solid #eee;
            background-color: #808080 \9;
            z-index: 100;
        }

        .custom-menu-bottom .pure-menu-link {
            opacity: 1;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            transition: all 0.5s;
        }

        .custom-menu-bottom.custom-menu-tucked .pure-menu-link {
            -webkit-transform: translateX(-140px);
            -moz-transform: translateX(-140px);
            -ms-transform: translateX(-140px);
            transform: translateX(-140px);
            opacity: 0;
            opacity: 1 \9;
        }

        .pure-menu-horizontal.custom-menu-tucked {
            z-index: -1;
            top: 45px;
            position: absolute;
            overflow: hidden;
        }

    }
</style>

<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header">
            <h1 class="brand-title" href="/">{{.name}}</h1>
            <h2 class="brand-tagline">{{.second_name}}</h2>

            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a class="pure-button" href="{{.navitem_github_link}}">我的项目页面</a>
                    </li>
                    <li class="nav-item">
                        <a class="pure-button" href="{{.navitem_githubio_link}}">我的GITHUB展示</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <div class="content pure-u-1 pure-u-md-3-4">

        <div class="custom-menu-wrapper">
            <div class="pure-menu custom-menu custom-menu-top">
                <a href="#" class="pure-menu-heading custom-menu-brand">PureBlog</a>
                <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
            </div>
            <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
                <div class="custom-menu-screen"></div>
                <ul class="pure-menu-list">
                    <li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
                    <li class="pure-menu-item"><a href="/aboutme" class="pure-menu-link">博主介绍</a></li>
                    {{range $key, $P_category := .Category}}
                        {{range $category := $P_category}}
                            <li class="pure-menu-item"><a href="/category/{{$category}}"
                                                          class="pure-menu-link">{{$category}}</a></li>
                        {{end}}
                    {{end}}
                    <li class="pure-menu-item"><a href="/admin" class="pure-menu-link">控制台</a></li>
                </ul>
            </div>
        </div>

        <div>
            <!-- A wrapper for all the blog posts -->
            <div class="posts" id="top">
                <h1 class="content-subhead">置顶文章</h1>

                <!-- A single blog post -->
            </div>

            <div class="posts" id="notop">
                <h1 class="content-subhead">最近文章</h1>

            </div>

            <div class="footer">
                {{ .xsrfdata }}
                <a href="#" class="pure-menu-heading pure-menu-link">返回顶部</a>
                <div class="pure-menu pure-menu-horizontal">
                    <ul>
                        <li class="pure-menu-item"><a href="/aboutme" class="pure-menu-link">About</a></li>
                        <li class="pure-menu-item"><a href="https://github.com/zwx19981207/Pureblog"
                                                      class="pure-menu-link">Pureblog</a>
                        </li>
                        <li class="pure-menu-item"><a href="http://github.com/zwx19981207"
                                                      class="pure-menu-link">GitHub</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script type="application/javascript">
    (function (window, document) {
        document.getElementById('toggle').addEventListener('click', function (e) {
            document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
            document.getElementById('toggle').classList.toggle('x');
        });
    })(this, this.document);
</script>

<script type="application/javascript">
    Page = 0
    var morAvaliable = true;
    String.prototype.format = function () {
        var resultStr = this.toString();
        // 参数为对象
        if (typeof arguments[0] === "object") {
            for (var i in arguments[0]) {
                resultStr = resultStr.replace("{" + i + "}", arguments[0][i]);
            }
        }
        // 多个参数
        else {
            for (var i = 0; i < arguments.length; i++) {
                resultStr = resultStr.replace("{" + i + "}", arguments[i]);
            }
        }
        return resultStr;
    };
    $.ajax({
        type: "POST",
        url: "/article/0",
        dataType: "json",
        data: "_xsrf=" + $('input[name="_xsrf"]').val(),
        success: function (jsonStr) {
            var P_list = "<section class=\"post\">\n" +
                "                    <header class=\"post-header\">\n" +
                "                        <img width=\"48\" height=\"48\" alt=\"Pureblog\" class=\"post-avatar\"\n" +
                "                             src=\"/static/img/common/{5}.png\">\n" +
                "\n" +
                "                        <a href=\"{6}\" ><h2 class=\"post-title\">{0}</h2></a>\n" +
                "\n" +
                "                        <p class=\"post-meta\">\n" +
                "                            By <a href=\"aboutme\" class=\"post-author\">{1}</a> under <a\n" +
                "                                    class=\"post-category post-category-{4}\" href=\"/category/{7}\">{3}</a> <a\n" +
                "                        </p>\n" +
                "                    </header>\n" +
                "\n" +
                "                    <div class=\"post-description\">\n" +
                "                            {2}\n" +
                "                    </div>\n" +
                "                </section>\n" +
                "            </div>"
            if (jsonStr !== null) {
                for (var i = 0; i < jsonStr.length; i++) {
                    if (jsonStr[i][2] === true) {
                        var zhuwx = P_list.format(jsonStr[i][3], jsonStr[i][1], jsonStr[i][4], jsonStr[i][5], jsonStr[i][5], jsonStr[i][1], "/article/" + jsonStr[i][0], jsonStr[i][5]);
                        $("#top").append(zhuwx);
                    } else {
                        var zhuwx = P_list.format(jsonStr[i][3], jsonStr[i][1], jsonStr[i][4], jsonStr[i][5], jsonStr[i][5], jsonStr[i][1], "/article/" + jsonStr[i][0], jsonStr[i][5]);
                        $("#notop").append(zhuwx);
                    }
                }
            }
        }
    });
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight+100 >= scrollHeight && morAvaliable === true) {
            Page += 1;
            $.ajax({
                type: "POST",
                url: "/article/page" + Page,
                dataType: "json",
                data: "_xsrf=" + $('input[name="_xsrf"]').val(),
                success: function (jsonStr) {
                    if (jsonStr === null) {
                        morAvaliable = false;
                    }
                    var P_list = "<section class=\"post\">\n" +
                        "                    <header class=\"post-header\">\n" +
                        "                        <img width=\"48\" height=\"48\" alt=\"Pureblog\" class=\"post-avatar\"\n" +
                        "                             src=\"/static/img/common/{5}.png\">\n" +
                        "\n" +
                        "                        <a href=\"{6}\" ><h2 class=\"post-title\">{0}</h2></a>\n" +
                        "\n" +
                        "                        <p class=\"post-meta\">\n" +
                        "                            By <a href=\"aboutme\" class=\"post-author\">{1}</a> under <a\n" +
                        "                                    class=\"post-category post-category-{4}\" href=\"/category/{7}\">{3}</a> <a\n" +
                        "                        </p>\n" +
                        "                    </header>\n" +
                        "\n" +
                        "                    <div class=\"post-description\">\n" +
                        "                            {2}\n" +
                        "                    </div>\n" +
                        "                </section>\n" +
                        "            </div>"
                    if (jsonStr !== null) {
                        for (var i = 0; i < jsonStr.length; i++) {
                            if (jsonStr[i][2] === true) {
                                var zhuwx = P_list.format(jsonStr[i][3], jsonStr[i][1], jsonStr[i][4], jsonStr[i][5], jsonStr[i][5], jsonStr[i][1], "/article/" + jsonStr[i][0], jsonStr[i][5]);
                                $("#top").append(zhuwx);
                            } else {
                                var zhuwx = P_list.format(jsonStr[i][3], jsonStr[i][1], jsonStr[i][4], jsonStr[i][5], jsonStr[i][5], jsonStr[i][1], "/article/" + jsonStr[i][0], jsonStr[i][5]);
                                $("#notop").append(zhuwx);
                            }
                        }
                    } else {
                        morAvaliable = false;
                    }
                },
                error: function () {
                    morAvaliable = false;
                }
            });
        }
    });
</script>
</html>
